<template>
    <el-tabs :tab-position="tabPosition"  class="demo-tabs">
        <el-tab-pane label="订单概括">
            <OrderSummary />
        </el-tab-pane>
        <el-tab-pane label="到店订单">
            <div class="demo-collapse">
                <el-collapse v-model="activeName">
                    <el-collapse-item title="操作提示" name="1">
                        <div>
                            *到店订单列表。
                        </div>
                        <div>
                            *订单状态有待付款，准备中，待取餐，已完成，已关闭。
                        </div>

                        <div>
                            *待付款订单取消后则为已关闭。待付款订单支付后则为准备中。准备中订单完成后则为待取餐。待取餐订单收货后则为已完成。
                        </div>

                    </el-collapse-item>

                </el-collapse>
            </div>
            <ShopOrder />
        </el-tab-pane>
        
    </el-tabs>
</template>
<script lang="ts" setup>
import ShopOrder from "../components/ShopOrder.vue"
import OrderSummary from "../components/OrderSummary.vue"
import { ref } from 'vue'
const activeName = ref('1')
const tabPosition = ref('left')
</script>
<style scoped>
.demo-tabs {
    background-color: #fff;
    height: 100%;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>